<template>
  <div class="drop-down">
    <label for="agent_game">所属游戏：</label>
    <input id="agent_game" :value="value" type="text" readonly @focus="dropClick" @blur="disappear">
    <ul class="drop_list" v-if="ifList">
      <li v-for="list in lists">{{list}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "选择所属游戏",
      ifList: false
    };
  },
  props: ["lists"],
  methods: {
    dropClick() {
      this.ifList = true;
    },
    disappear() {
      this.ifList = false;
    }
  }
};
</script>
<style scoped>
.drop-down {
  display: inline-block;
  position: relative;
}
.drop-down label,
.drop-down input {
  font-size: 0.32rem;
}
.drop-down label {
  color: #555;
}
.drop-down input {
  border: 1px solid #d7d7d7;
  border-radius: 0.1rem;
  font-size: 0.32rem;
  text-align: center;
  height: 0.56rem;
  width: 3.87rem;
}
.drop_list {
  position: absolute;
  right: 0;
  top: 0.65rem;
  background-color: #fff;
  box-shadow: 0 0.02rem 0.03rem 0.01rem #000;
  height: 3rem;
  width: 3.87rem;
  overflow-y: auto;
  text-align: center;
}
</style>

